<template>
  <div class="headtop">
    <header class="header">
      <ul class="tab">
        <li
          v-for="(item, index) in title"
          @click="clickitem(index)"
          :class="ind == index ? 'active' : ''"
          :key="index"
          :ref="index"
        >
          {{ item }}
        </li>
      </ul>
    </header>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: {
    count: {
      type: Number,
    },
    name: {
      type: String,
      default: "订单详情",
    },
  },
  data() {
    return {
      ind: 0,
      title: ["普通", "优质", "陪玩"],
      num: 0,
      list: [],
    };
  },
  methods: {
    clickitem(index) {
      let orderlist;
      this.ind = index;
      // console.log(index);
      if (index == 0) {
        this.num = null;
      } else if (index == 1) {
        this.num = 2;
      } else if (index == 2) {
        this.num = 3;
      }
      // console.log(this.num);
      axios
        .post(
          "/dl/wap/getMoreAllTakeOrderListOrCondition?keyword=&pageIndex=1&gameId=0&areaId=0&serverId=0&orderGrade=" +
            this.num +
            "&sortCondition=&minPrice=&maxPrice=&dlDoubleStartScore=&dlDoubleEndScore="
        )
        .then((res) => {
          // console.log(res);
          orderlist = res.data;
          this.$store.dispatch("orderlist/getListAct", orderlist);
        });
    },
  },
  beforeCreate() {
    axios
      .post(
        "/dl/wap/getMoreAllTakeOrderListOrCondition?keyword=&pageIndex=1&gameId=0&areaId=0&serverId=0&orderGrade=&sortCondition=&minPrice=&maxPrice=&dlDoubleStartScore=&dlDoubleEndScore="
      )
      .then((res) => {
        console.log(res.data);
        this.$store.dispatch("orderlist/initListAct", res.data);
      });
  },
};
</script>



<style lang="less" scoped>
.headtop {
  position: fixed;
  width: 100vw;
  height: 50px;
  background: #5190ff;
  .header {
    width: 51vw;
    height: 32px;
    margin: auto;
    border-radius: 5px;
    ul {
      border: 1px solid #fff;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      border-radius: 5px;
      .active {
        color: #5190ff;
        background-color: #fff;
      }
      li {
        width: 17vw;
        border-radius: 3px;
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #fff;
        background: #5190ff;
        text-align: center;
      }
    }
  }
}
</style>